<template>
    <view class="page">
        <view class="logo">
            <image :src="$imgUrl+'logo01.png'" mode=""></image>
        </view>
        <view class="login-form">
            <form @submit="formSubmit">
                <!-- 填写区 -->
                <!-- #ifdef APP-PLUS || H5  -->
                <view class="input-info">
                    <view class="info">
                        <input type="tel" v-model="form.mobile" maxlength="11" placeholder="请输入手机号" />
                        <view class="more"> </view>
                    </view>
                    <view class="info">
                        <input type="tel" v-model="form.code" maxlength="6" placeholder="请输入验证码" />
                        <view class="more">
                            <text class="mo" :disabled="codeDisabled" plain @click="getCode">{{ codeText }}</text>
                        </view>
                    </view>
                    <view class="info">
                        <input :password="!isPassword" maxlength="26" v-model="form.password" placeholder="请输入登录密码(最少6位)" />
                        <view class="more">
                            <text class="iconfont" :class="isPassword ? 'icon-eye-off' :'icon-eye-on'" @click="isPassword = !isPassword"></text>
                        </view>
                    </view>
                </view>
                <!-- #endif -->
                <view class="list">
                    <view class="title">
                        <text>请选择康养机构</text>
                    </view>
                    <view class="more-content">
                        <text class="content">{{ orgText }}</text>
                        <text class="iconfont icon-more more"></text>
                    </view>
                    <view class="picker">
                        <picker @change="orgPickerChange" :value="form.orgIndex" :range="businList">
                            <view class="uni-input" style="height: 100rpx">{{
                                orgText
                                }}</view>
                        </picker>
                    </view>
                </view>
                <!-- #ifdef MP-WEIXIN -->
                <view class="list list1">
                    <view class="title">
                        <text>邀请码</text>
                    </view>
                    <view class="more-content">
                        <input v-model="form.invite_code" maxlength="8" placeholder="请输入邀请码(选填)" />
                        <!-- <text class="iconfont icon-more more"></text> -->
                    </view>
                </view>
                <!-- #endif -->
                <!-- 按钮 -->
                <!-- #ifdef APP-PLUS || H5  -->
                <view class="btn-info">
                    <button type="default" :class="{ disabled: !isChecked }" form-type="submit" :disabled="loading">
                        同意协议并注册
                    </button>
                </view>
                <!-- #endif -->
                <!-- #ifdef MP-WEIXIN -->
                <view class="btn-info">
                    <button type="default" form-type="submit">
                        立即绑定
                    </button>
                </view>
                <!-- #endif -->
            </form>
        </view>
        <!-- 操作 -->
        <!-- #ifdef APP-PLUS || H5  -->
        <view class="operation">
            <text></text>
            <text @click="onLogin">已有账号去登录</text>
        </view>
        <view class="content-label">
            <view class="radio" @click="isChecked = !isChecked">
                <image :src="$imgUrl+'login/select.png'" mode="" v-if="isChecked"></image>
                <image :src="$imgUrl+'login/no.png'" mode="" v-else></image>
                阅读并同意<text style="color:#0080f6" @click="policy(1)">《隐私政策》</text>和<text style="color: #0080f6" @click="policy(2)">《服务协议》</text>
            </view>
        </view>
        <!-- #endif -->
        <quick-message ref="message"></quick-message>
    </view>
</template>

<script>
import { sendRegister, getBusinListsAll, registerAccount, bingBusin } from "@/api/login"
export default {
    data() {
        return {
            isChecked: false,
            loading: false,
            codeDis: false,
            codeText: "获取验证码",
            menuNum: 60,
            timer: '',
            businListsAll: [],
            businList: [],
            orgText: "请选择",
            isPassword: false,
            isRegister: false,
            codeText: "获取验证码",
            codeDisabled: false, //验证码禁用状态
            codeTimer: null,
            morenxuanz: false,
            // 表单
            form: {
                mobile: null,
                code: null,
                pass: null,
                orgIndex: 0,
                password: null,
                busin_id: null,
            },
            $imgUrl: this.$imgUrl,
        };
    },
    onShow() {
        let fun = [
            getBusinListsAll()
        ]
        Promise.all(fun).then(res => {
            this.businListsAll = res[0].data
            this.businListsAll.forEach(e => {
                this.businList.push(e.busin_name)
            });
        })
    },
    methods: {
        onLogin() {
            uni.redirectTo({
                url: "/pagesA/login/findCodeindex",
            });
        },
        // 选择机构
        orgPickerChange(e) {
            this.form.orgIndex = e.detail.value;
            this.orgText = this.businList[this.form.orgIndex];
            this.form.busin_id = this.businListsAll.find(item => item.busin_name == this.orgText) ? this.businListsAll.find(item => item.busin_name == this.orgText).id : null
        },
        // 协议
         // 协议
         policy(e) {
            // #ifdef H5
            this.$navigateTo({
                url: "/pagesA/login/agreenment",
                params: {
                    type: e,
                },
            });
            // #endif
            // #ifndef H5
            let link = "https://h5.weilankangyang.com/#/pagesA/login/agreenment?type=" + e
            uni.navigateTo({
                url: '/pagesA/login/tool?link=' + encodeURIComponent(link)
            })
            // #endif
        },
        showToast() {
            this.$refs.message.show({
                msg: this.toastText,
                type: "error",
            });
        },
        checkPhone() {
            return new Promise((resolve, reject) => {
                if (!this.form.mobile) {
                    this.toastText = "请输入手机号";
                    this.showToast();
                    reject();
                } else if (!/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.form.mobile)) {
                    this.toastText = "请输入正确的手机号";
                    this.toastError = true;
                    this.showToast();
                    reject();
                }
                resolve()
            })
        },
        checkAll() {
            return new Promise((resolve, reject) => {
                if (!this.isChecked) {
                    this.toastText = "请同意服务协议";
                    this.showToast();
                    reject();
                } else if (!this.form.mobile) {
                    this.toastText = "请输入手机号";
                    this.showToast();
                    reject();
                } else if (!/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.form.mobile)) {
                    this.toastText = "请输入正确的手机号";
                    this.showToast();
                    reject();
                } else if (!this.form.code) {
                    this.toastText = "请输入验证码";
                    this.showToast();
                    reject();
                } else if (!this.form.password) {
                    this.toastText = "请输入登录密码";
                    this.showToast();
                    reject();
                } else if (this.form.password.length < 6) {
                    this.toastText = "登录密码最少6位";
                    this.showToast();
                    reject();
                } else if (!this.form.busin_id) {
                    this.toastText = "请选择康养机构";
                    this.showToast();
                    reject();
                }
                resolve();
            });
        },
        checkBusin() {
            return new Promise((resolve, reject) => {
                if (!this.form.busin_id) {
                    this.toastText = "请选择康养机构";
                    this.showToast();
                    reject();
                }
                resolve();
            });
        },
        // 获取验证码
        getCode() {
            var self = this;
            this.checkPhone().then(() => {
                this.codeDis = true;
                this.codeText = self.menuNum + "s";
                this.timer = setInterval(function () {
                    if (self.menuNum == 0) {
                        clearInterval(self.timer);
                        self.codeDis = false;
                        self.codeText = "重新获取";
                        self.menuNum = 60;
                    } else {
                        self.menuNum--;
                        self.codeText = self.menuNum + "s";
                    }
                }, 1000);
                sendRegister({ mobile: this.form.mobile.trim() }).then(() => {
                    this.$message('验证码已发送')
                })
            }).catch(() => { });
        },
        formSubmit() {
            // #ifdef APP-PLUS || H5
            this.checkAll().then(() => {
                this.loading = true;
                let json = {
                    mobile: this.form.mobile,
                    code: this.form.code,
                    pass: this.$md5.md5(this.form.password),
                    busin_id: this.form.busin_id
                }
                registerAccount(json).then((res) => {
                    if (res.code == 1) {
                        this.$refs.message.show({
                            msg: "注册成功",
                            type: "success"
                        })
                        setTimeout(() => {
                            uni.navigateTo({
                                url: '/pagesA/login/findCodeindex'
                            })
                        }, 1000)
                    }
                    this.loading = false;
                }).catch(() => {
                    this.loading = false;
                })
            }).catch(() => { });
            // #endif
            // #ifdef MP-WEIXIN
            this.checkBusin().then(() => {
                bingBusin({ busin_id: this.form.busin_id, invite_code: this.form.invite_code }).then(res => {
                    if (res.code == 1) {
                        uni.setStorageSync('busin_id', this.form.busin_id);
                        uni.setStorageSync('huanxin', JSON.stringify(res.data.huanxin))
                        uni.showToast({
                            title: res.info,
                            icon: 'none'
                        });
                        setTimeout(() => {
                            uni.reLaunch({
                                url: '/pages/my/my'
                            })
                        }, 1000)
                    }
                })
            }).catch(() => { });
            // #endif
        },
    },
};
</script>

<style scoped lang="scss">
.page {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #ffffff;
}
.logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 240rpx;
  image {
    width: 400rpx;
    height: 120rpx;
  }
}
.login-form {
  /* 填写 */
  .input-info {
    padding: 0 6%;
    .info {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      height: 100rpx;
      border-bottom: 2rpx solid #f6f6f6;
      input {
        width: 70%;
        height: 100%;
        font-size: 26rpx;
        color: #222222;
      }
      .more {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        width: 30%;
        height: 100%;
        .iconfont {
          font-size: 34rpx;
        }
        .mo {
          font-size: 26rpx;
          padding-left: 20rpx;
          margin-left: 10rpx;
          border-left: 2rpx solid #eeeeee;
        }
      }
    }
  }
  .list {
    padding: 0 6%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 100rpx;
    border-bottom: 2rpx solid #f6f6f6;
    .title {
      display: flex;
      align-items: center;
      text {
        font-size: 28rpx;
        color: #222222;
      }
    }
    .more-content {
      display: flex;
      align-items: center;
      image {
        width: 100rpx;
        height: 100rpx;
        border-radius: 100%;
      }
      .content {
        font-size: 28rpx;
        color: #959595;
      }
      .more {
        font-size: 24rpx;
        color: #959595;
        margin-left: 20rpx;
      }
    }
    .picker {
      position: absolute;
      width: 100%;
      height: 100%;
      opacity: 0;
    }
  }
  .list1 {
    justify-content: flex-start;
    .more-content {
      padding-left: 20rpx;
    }
  }
  /* 按钮 */
  .btn-info {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100rpx;
    margin-top: 40rpx;
    button {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 90%;
      height: 80rpx;
      background: linear-gradient(to right, $base, $change-clor);
      border-radius: 10rpx;
      color: #ffffff;
      font-size: 28rpx;
      &.disabled {
        opacity: 0.4;
      }
    }
  }
}

/* 操作 */
.operation {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 6%;
  height: 80rpx;
  text {
    font-size: 28rpx;
    color: #555555;
  }
}

/* 其他 */
.other-ways {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 80rpx;
  margin-top: 50rpx;
  text {
    font-size: 28rpx;
    color: #999999;
  }
}
.other-ways::after {
  content: "";
  width: 36%;
  height: 2rpx;
  background-color: #eeeeee;
}
.other-ways::before {
  content: "";
  width: 36%;
  height: 2rpx;
  background-color: #eeeeee;
}
/* 登录方式 */
.login-way {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 200rpx;
  .way {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 50%;
    height: 100%;
    image {
      width: 100rpx;
      height: 100rpx;
    }
    text {
      font-size: 28rpx;
      color: #959595;
      margin-top: 20rpx;
    }
  }
}

.content-label {
  position: fixed;
  bottom: 15%;
  font-size: 24rpx;
  color: #999999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30rpx 15%;
  .radio {
    display: flex;
    align-items: center;
    image {
      width: 30rpx;
      height: 30rpx;
      margin-right: 18rpx;
    }
  }
}
</style>
